<template>
  <div>
    <el-row>
      <el-col :span="12">
        <pie-chart v-show="collections.length" title="最受欢迎房屋top5" :data="collections" />
        <span v-show="!collections.length">你们没有发布房屋</span>
      </el-col>
      <el-col :span="12">
        <pie-chart v-show="comments.length" title="最受欢迎论坛top5" :data="comments" />
        <span v-show="!comments.length">你们没有发布论坛</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <pie-chart v-show="appoints.length" title="预约最多房屋top5" :data="appoints" />
        <span v-show="!appoints.length">你们没有发布房屋</span>
      </el-col>
      <el-col :span="12">
        <pie-chart v-show="views.length" title="浏览最多房屋top5" :data="views" />
        <span v-show="!views.length">你们没有发布房屋</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { _getCollection, _getComment, _getAppoint, _getViews } from './store'
import PieChart from '@/components/pie-chart/pie-chart'

export default {
  name: 'statisticalOther',
  components: { PieChart },
  data() {
    return {
      collections: [],
      comments: [],
      appoints: [],
      views: []
    }
  },
  methods: {
    async getCollection() {
      const { data, success } = await _getCollection()
      if (!success) {
        this.$message({ type: 'error', message: '获取信息失败' })
      } else {
        this.collections = data
      }
    },
    async getComment() {
      const { data, success } = await _getComment()
      if (!success) {
        this.$message({ type: 'error', message: '获取信息失败' })
      } else {
        this.comments = data
      }
    },
    async getAppoint() {
      const { data, success } = await _getAppoint()
      if (!success) {
        this.$message({ type: 'error', message: '获取信息失败' })
      } else {
        this.appoints = data
      }
    },
    async getViews() {
      const { data, success } = await _getViews()
      if (!success) {
        this.$message({ type: 'error', message: '获取信息失败' })
      } else {
        this.views = data
      }
    }
  },
  mounted() {
    this.getCollection()
    this.getComment()
    this.getAppoint()
    this.getViews()
  }
}
</script>

<style scoped>
#statisticalIncome {
  height: 400px;
  width: 100%;
}
</style>
